<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="ProfileHeader" class="ProfileHeader" data-za-detail-view-path-module="Unknown"
     data-za-extra-module="{&quot;card&quot;:{&quot;content&quot;:{&quot;type&quot;:&quot;User&quot;,&quot;token&quot;:&quot;baka5&quot;}}}">
    <div class="Card">
        <div class="ProfileHeader-userCover">
            <div class="UserCoverEditor">
                <div><label class="UploadPicture-wrapper"><input type="file" accept="image/png,image/jpeg"
                                                                 class="UploadPicture-input">
                    <button type="button"
                            class="Button UserCoverEditor-simpleEditButton DynamicColorButton DynamicColorButton--dark">
                        <span style="display: inline-flex; align-items: center;">​<svg class="Zi Zi--Camera"
                                                                                       fill="currentColor"
                                                                                       viewBox="0 0 24 24" width="1.2em"
                                                                                       height="1.2em"><path
                                d="M20.094 6S22 6 22 8v10.017S22 20 19 20H4.036S2 20 2 18V7.967S2 6 4 6h3s1-2 2-2h6c1 0 2 2 2 2h3.094zM12 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0 1.5a5 5 0 1 0-.001-10.001A5 5 0 0 0 12 17.5zm7.5-8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
                                fill-rule="evenodd"></path></svg></span> 编辑封面图片
                    </button>
                </label>
                    <div class="UserCover"><img class="UserCover-image"
                                                src="https://pic2.zhimg.com/80/v2-07271482148fea81bba301fd01da98f4_r.jpg"
                                                alt="用户封面"></div>
                </div>
            </div>
        </div>
        <div class="ProfileHeader-wrapper">
            <div class="ProfileHeader-main">
                <div class="UserAvatarEditor ProfileHeader-avatar" style="top: -57px;">
                    <div class="UserAvatar"><img class="Avatar Avatar--large UserAvatar-inner" width="160" height="160"
                                                 src="https://pic3.zhimg.com/v2-15a5cb5727f4db52b16647ca44cbeef9_xl.jpg"
                                                 srcset="https://pic3.zhimg.com/v2-15a5cb5727f4db52b16647ca44cbeef9_xll.jpg 2x"
                                                 alt=""></div>
                    <label class="UploadPicture-wrapper"><input type="file" accept="image/png,image/jpeg"
                                                                class="UploadPicture-input">
                        <div class="Mask UserAvatarEditor-mask Mask-hidden">
                            <div class="Mask-mask Mask-mask--black UserAvatarEditor-maskInner"></div>
                            <div class="Mask-content">
                                <svg class="Zi Zi--Camera UserAvatarEditor-cameraIcon" fill="currentColor"
                                     viewBox="0 0 24 24" width="36" height="36">
                                    <path d="M20.094 6S22 6 22 8v10.017S22 20 19 20H4.036S2 20 2 18V7.967S2 6 4 6h3s1-2 2-2h6c1 0 2 2 2 2h3.094zM12 16a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0 1.5a5 5 0 1 0-.001-10.001A5 5 0 0 0 12 17.5zm7.5-8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"
                                          fill-rule="evenodd"></path>
                                </svg>
                                <div class="UserAvatarEditor-maskInnerText">修改我的头像</div>
                            </div>
                        </div>
                    </label></div>
                <div class="ProfileHeader-content">
                    <div class="ProfileHeader-contentHead"><h1 class="ProfileHeader-title"><span
                            class="ProfileHeader-name">孔孔孔孔</span><span class="ztext ProfileHeader-headline">买石灰街车站的海鸥，山水禽兽和年少遗梦。</span>
                    </h1></div>
                    <div class="ProfileHeader-contentBody"
                         style="overflow: hidden; transition: height 300ms ease-out 0s; height: 22px;">
                        <div>
                            <div class="ProfileHeader-info">
                                <div class="ProfileHeader-infoItem">
                                    <div class="ProfileHeader-iconWrapper"><span
                                            style="display: inline-flex; align-items: center;">​<svg
                                            class="Zi Zi--Education" fill="currentColor" viewBox="0 0 24 24"
                                            width="1.2em" height="1.2em"><path
                                            d="M12 4L1 7.94v.588l4.153 2.73v5.166C5.158 16.758 8.028 20 12 20c3.972 0 6.808-3.116 6.85-3.576l.006-5.163 4.129-2.733.015-.586L12 4z"
                                            fill-rule="evenodd"></path></svg></span></div>
                                    青岛理工大学
                                    <div class="ProfileHeader-divider"></div>
                                    <div class="ProfileHeader-iconWrapper"><span
                                            style="display: inline-flex; align-items: center;">​<svg class="Zi Zi--Male"
                                                                                                     fill="currentColor"
                                                                                                     viewBox="0 0 24 24"
                                                                                                     width="24"
                                                                                                     height="24"><path
                                            d="M8.025 15.641a3.5 3.5 0 1 1 4.95-4.95 3.5 3.5 0 0 1-4.95 4.95zm10.122-9.369a.759.759 0 0 0-.753-.753L13.322 5a.738.738 0 0 0-.744.744.757.757 0 0 0 .751.752l2.127.313c-.95.954-1.832 1.83-1.832 1.83a5.502 5.502 0 0 0-7.013 8.416 5.5 5.5 0 0 0 8.415-7.016l1.842-1.819.303 2.116a.758.758 0 0 0 .752.753.738.738 0 0 0 .744-.744l-.52-4.073z"
                                            fill-rule="evenodd"></path></svg></span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ProfileHeader-contentFooter">
                        <button type="button" class="Button ProfileHeader-expandButton Button--plain"><span
                                style="display: inline-flex; align-items: center;">​<svg class="Zi Zi--ArrowDown"
                                                                                         fill="currentColor"
                                                                                         viewBox="0 0 24 24" width="24"
                                                                                         height="24"><path
                                d="M12 13L8.285 9.218a.758.758 0 0 0-1.064 0 .738.738 0 0 0 0 1.052l4.249 4.512a.758.758 0 0 0 1.064 0l4.246-4.512a.738.738 0 0 0 0-1.052.757.757 0 0 0-1.063 0L12.002 13z"
                                fill-rule="evenodd"></path></svg></span> 查看详细资料
                        </button>
                        <div class="ProfileButtonGroup ProfileHeader-buttons">
                            <button type="button" class="Button Button--blue">编辑个人资料</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>